<script setup lang="ts">

import {question} from "@/store/songStore";
import ChatSettingSvg from "@/svg/ChatSettingSvg.vue";
import SendSvg from "@/svg/sendSvg.vue";
import {ref} from "vue";
import ShowPasswordSvg from "@/svg/showPasswordSvg.vue";
import NoShowPasswordSvg from "@/svg/noShowPasswordSvg.vue";
import {currentApiKey, currentChatUrl} from "@/store/chatApiStore";
import axios from "axios";
import LoadingSvg from "@/svg/LoadingSvg.vue";
import router from "@/Router";
import ChildBoth from "@/Components/ChildBoth.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import LeftList from "@/Components/LeftList.vue";
import SongBottom from "@/Components/SongBottom.vue";

let showPassword = ref(false)

function changeShowPassword(){
  showPassword.value = !showPassword.value
}
let url = ref(currentChatUrl.value)
let password = ref(currentApiKey.value)

function updateApiSetting(){
  localStorage.setItem("localUrl",url.value)
  currentChatUrl.value = url.value

  localStorage.setItem("localApiKey",password.value)
  currentApiKey.value = password.value
  alert("更新成功")
  router.push("/q_a")

}
let tipWord = ref("")
let waitingSign = ref(false)
function validaeApi(){
  waitingSign.value = true
  axios.post(
      url.value,
      {
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content":"你好 （中文回答且不能超过10字）"}]
      },
      {
        headers:{
          "Authorization": "Bearer " + password.value,
          "Content-Type": "application/json",
        }
      }
  )
      .then((res=>{
        waitingSign.value = false
        tipWord.value="成功，你输入的网址与密钥匹配"
        alert(tipWord.value)
      }))
      .catch((err)=>{
        waitingSign.value = false
        tipWord.value="失败，你输入的网址与密钥不匹配"
        alert(tipWord.value)
      })
}
</script>

<template>
  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search ></undo-redo-search>
      <div class="body flex flex-col w-full h-full justify-center items-center gap-4">
        <div class="search w-65% h-12     flex justify-center items-center gap-4">
          <div class="text-gray-5 text-5">地址</div>
          <input class=" grow   bg-white  outline-none h-12 rounded-xl border-2
      border-gray-3   hover:border-pink-3 hover:border-3
      text-gray-5 text-5 pl-3"
                 :placeholder="url"
                 v-model="url"
          />
        </div>

        <div class="search h-12  w-65%   flex justify-center items-center gap-4">
          <div class="text-gray-5 text-5">密钥</div>
          <input class=" grow   bg-white  outline-none h-12 rounded-xl border-2
      border-gray-3   hover:border-pink-3 hover:border-3
      text-gray-5 text-5 pl-3"
                 placeholder="请设置您的ApiKey"
                 v-model="password"
                 :type="password && !showPassword ? 'password' : 'text'"
          />
          <div v-show="showPassword" @click="changeShowPassword"><show-password-svg class="text-pink-3 h-12 w-12 "></show-password-svg></div>
          <div v-show="!showPassword" @click="changeShowPassword"><no-show-password-svg class="text-pink-3 h-12 w-12  "></no-show-password-svg></div>
        </div>
        <div class="flex  w-65% justify-around items-center mt-10" >
          <div class="w-30%"><el-button type="primary" color="pink" size="large" @click="validaeApi">
            <p class="text-4.5 text-white" >验证</p>
            <div v-show="waitingSign">
              <loading-svg class="animate-spin text-white w-6 h-6 ml-3 "></loading-svg>
            </div>
          </el-button></div>
          <el-button type="primary" color="pink"  size="large" @click="updateApiSetting"><p class="text-4.5 text-white" >更新并返回</p></el-button>
        </div>
      </div>


    </div>
    <right-user-photo></right-user-photo>
  </div>

</template>

<style scoped>

</style>